<template>
  <div class="content">
    <a-space class="space" direction="vertical" fill>
      <TableTurn
        :is-show-pagination="false"
        :table-data="getData"
        ref="tableRef"
      >
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="出库数量"
          data-index="outboundAmount"
          :width="200"
        >
        </a-table-column>
        <a-table-column title="客户名称" data-index="supplierName" :width="200">
        </a-table-column>
        <a-table-column
          title="客户编号"
          data-index="supplierNumber"
          :width="200"
        >
        </a-table-column>

        <a-table-column title="条码" :width="200"
          ><template #cell="{ record }">
            <QRcode ref="qrcode" :qr-url="`${record.content}`"
          /></template>
        </a-table-column>
      </TableTurn>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getLocationOutboundDetails } from '@/api/inventory-management/warehouse-management/location-list/index';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash';

  const route = useRoute();
  const id = Number(route.query.id);
  const qrcodeRef = ref();

  // 获取对应列表信息
  const getData = async (page: any) => {
    try {
      const res = await getLocationOutboundDetails({ ...page, id });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  onMounted(() => {});
</script>

<style scoped lang="less">
  .space {
    padding: 20px;
  }
</style>
